<template>
  <div class="recommend">
    <!-- 头部 -->
    <div class="recommend-header">
      <div class="left">
        <div class="user m_r-2">
          <el-image class="avatar" :src="getImg(user.avatar)" fit="contain" />
          <span>{{ user.nickname }}</span>
        </div>
        <div class="info">
          <div class="info-item m_r-1">
            <span class="info-label">发布时间： </span>
            <span class="info-content">{{ time }}</span>
          </div>
          <div class="info-item m_r-1">
            <span class="info-label">发布平台： </span>
            <span class="info-content">{{ getShow(system, 'value', systems, 'label') }}</span>
          </div>
        </div>
      </div>
      <div class="right">
        <!-- 点赞 -->
        <div class="count-item">
          <span class="count-label">点赞：</span>
          <span class="count-content">{{ supportNums }}</span>
        </div>
        <!-- 评论 -->
        <div class="count-item">
          <span class="count-label">评论：</span>
          <span class="count-content">{{ commentNums }}</span>
        </div>
        <!-- 转发 -->
        <div class="count-item">
          <span class="count-label">转发：</span>
          <span class="count-content">{{ forwardNums }}</span>
        </div>
      </div>
    </div>
    <!-- 推文部分 -->
    <div class="recommend-content">
      <!-- todo - 这里的展开收起要重新实现一下 -->
      <p ref="recommendContent">{{ content }}</p>
      <el-button v-if="isShowExpand" link @click="showAllContent">{{ expandTxt }}</el-button>
    </div>
    <!-- 推文图片部分 -->
    <div class="recommend-image">
      <!-- todo - 这里要处理图片为空的情况 -->
      <el-image 
        class="recommend-image-item" 
        v-for="(item, index) in images" 
        :key="index" 
        :src="getImg(item.resource_url)"
        :zoom-rate="1.2"
        :max-scale="7"
        :min-scale="0.2"
        :preview-src-list="item.srcList"
        :initial-index="4"
      fit="cover"
      ></el-image>
    </div>
  </div>
</template>
<script setup>
import avatar from '@/assets/images/four/avatar.jpeg';
import { ref, computed, onMounted, onUpdated } from 'vue';
import { API } from '@/utils/status.js';

const systems = API.steganography.systems;
// 展示推文的p标签容器
const recommendContent = ref(null);
// 推文是否大于95px高度，是否显示展开按钮
const isShowExpand = ref(false);
const expandTxt = ref('展开');
const expandFlag = ref(false);

const props = defineProps({
  // 用户信息
  user: {
    type: Object,
    default: {
      id: null,
      avatar: '',
      nickname: '暂未提供昵称'
    }
  },
  // 平台
  system: {
    type: Number,
    default: 0
  },
  // 点赞数量
  supportNums: {
    type: Number,
    default: 0
  },
  // 评论数量
  commentNums: {
    type: Number,
    default: 0
  },
  // 转发
  forwardNums: {
    type: Number,
    default: 0
  },
  // 推文图片
  images: {
    type: Array,
    default: []
  },
  // 创建时间
  time: {
    default: '2024-09-17 10:10'
  },
  // 推文内容
  content: {
    type: String
  }
});

const getShow = computed(() => {
  return function (v, k, arr, returnKey) {
    let obj = arr.find((item) => item[k] === v);
    let res = obj ? obj[returnKey] : "";
    return res;
  };
});
const getImg = computed(() => {
  return function (img){
    return img ? `${import.meta.env.VITE_APP_BASE_API}/${img}` : avatar;
  }
});

function showAllContent(){
  if (expandFlag.value) {
    // 当前为展开状态
    recommendContent.value.style.display = '-webkit-box-';
    recommendContent.value.style.height = '100px';
    expandTxt.value = '展开';
  } else {
    // 当前为收起状态
    recommendContent.value.style.height = 'auto';
    recommendContent.value.style.display = 'block';
    expandTxt.value = '收起';
  }
  expandFlag.value = !expandFlag.value
}

onMounted(() => {
  if (recommendContent.value && recommendContent.value.offsetHeight > 95){
    isShowExpand.value = true;
  }
});

</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
// 总容器
.recommend {
  width: 100%;
  background-color: var(--color-gray-2);
  padding: 15px 20px;
  border: 1px solid var(--color-main-border);
  margin-bottom: 15px;
  border-radius: 6px;
}
// 头部
.recommend-header {
  height: 40px;
  // background-color: pink;
  @include flex-between-center;
  border-bottom: 1px solid var(--color-dialog-title);
}
.recommend-header > .left {
  display: flex;
  .user,
  .info {
    @include flex-start-center;
  }
  .user > .avatar { 
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color-white-10);
    margin-right: 20px;
  }
}
.recommend-header > .right {
  @include flex-start-center;
  & > .count-item {
    margin-right: 20px;
  }
  & > .count-item > .count-label {
    margin-right: 10px;
    color: var(--color-gray-10);
  }
  & > .count-item > .count-content {
    color: var(--color-black-10);
  }
}
// 推文部分
.recommend-content {
  padding: 10px 5px;
  p {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    // background-color: pink;
    white-space: wrap;
    width: 100%;
    word-break: break-all;
    height: 100px;
  }
  & > .el-button.is-link {
    color: var(--color-main);
  }
}
// 图文图片部分
.recommend-image {
  width: 100%;
  height: 94px;
  // background-color: pink;
  border: 2px dashed var(--color-black-3);
  white-space: nowrap;
  overflow-x: auto;
  @include scrollBarHor;
  .recommend-image-item {
    display: inline-block;
    width: 75px;
    height: 75px;
    margin: 5px 0 0 5px;
  }
}
</style>